<template>
    <el-container class="main-container">
        <Menu />
        <el-container class="e-container">
            <Header />
            <!-- 方案一：保留滚动条但仅在内容区显示 -->
            <el-main style="overflow-y: auto; height: calc(100vh - 120px)">
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import Menu from '@/layouts/Menu.vue';
import Header from '@/layouts/Header.vue';
</script>

<style scoped>
.main-container {
    height: 100vh;
    /* 关键样式1：容器占满视口高度 */
    overflow: hidden;
    /* 关键样式2：禁止外层滚动 */
}

.e-container {
    flex-direction: column;
    height: calc(100vh - 20px);
    /* 根据header高度调整 */
}

/* 方案二：完全隐藏滚动条（慎用） */
.el-main::-webkit-scrollbar {
    display: none;
}
</style>